<template>
  <div class="bodys">
    <div class="text">有害生物信息</div>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="病虫害名录" name="first">
          <left />
        </el-tab-pane>
        <el-tab-pane label="寄主植物" name="second">
          <right />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
  components: { Left, Right },
  data() {
    return {
      // 切换 tabs导航
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss" scoped>
.bodys {
  padding: 10px;
}
.text {
  height: 60px;
  font-size: 20px;
  margin-left: 10px;
  color: #888;
  margin-right: 20px;
  font-weight: 500;
  font-size: 22px;
  line-height: 60px;
  margin-left: 20px;
}
</style>
